window.addEventListener('load',function(){
        let ENG = [{ name: "&" }, { name: "A" }, { name: "B" }, { name: "C" }, { name: "D" }, { name: "E" }, { name: "F" }, { name: "G" }, { name: "H" }, { name: "I" }, { name: "J" }, { name: "K" }, { name: "L" }, { name: "M" }, { name: "N" }, { name: "O" }, { name: "P" }, { name: "Q" }, { name: "R" }, { name: "S" }, { name: "T" }, { name: "U" }, { name: "V" }, { name: "W" }, { name: "X" }, { name: "Y" }, { name: "Z" }, { name: "%2523" }];
        let Singer = ['全部', '华语男', '华语女', '华语组合', '日韩男', '日韩女', '日韩组合', '欧美男', '欧美女', '欧美组合', '其他']
        // 分页
        let page = location.hash.replace('#!fenye=', '') || 1;
        let pageSize = 60;
        let totals = 0;
        let index = 0;
        let category = 0;

        // 先渲染首页
        fn(category, index);
        // 往#ENG里渲染
        ENG.forEach(item => {
            Eng.innerHTML += `
             <li>${item.name}</li>
            `
        });
        // 往#Singer里渲染
        Singer.forEach(item => {
            singer.innerHTML += `
               <li>${item}</li>
            `
        });
        // 获取#Eng里面所有的li
        let lis = document.querySelectorAll('#Eng li');
        // 获取#singer里面所有的li
        let Siglis = document.querySelectorAll('#singer li');
        Eng.children[0].className = 'active';
        Eng.children[0].innerText = '热门';
        Eng.lastElementChild.innerText = '#';
        singer.children[0].className = 'active';

        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click', function () {
                lis[index].className = '';
                index = i;
                fn(category, index);
                lis[index].className = 'active';
            })
        }
        for (let i = 0; i < Siglis.length; i++) {
            Siglis[i].onclick = function () {
                Siglis[category].className = '';
                category = i;
                fn(category, index);
                Siglis[category].className = 'active';
            }
        }
        function fn(category, index) {
            console.log(page,pageSize);
            fetch(`http://39.96.88.57:9090/api/www/artist/artistInfo?category=${category}&prefix=${ENG[index].name}&pn=${page}&rn=${pageSize}`).then(r => r.json()).then(res => {
            totals = res.data.total;
            list.innerHTML = '';
                res.data.artistList.forEach((item, index) => {
                    if (index <= 11) {
                        // 直接在a里给id跳转，也是最方便的一种
                        list.innerHTML += `
                <li data-ind=${item.id}>
                    <a href="./singerDetails.html?id=${item.id}">
                        <img src="${item.pic}" alt="">
                        <p class="name">${item.name}</p>
                        <p class="num">${item.musicNum}首歌曲</p>
                    </a>
                </li>
                    `
                    } else {
                        list.innerHTML += (`
                <li data-ind=${item.id}>
                    <a href="./singerDetails.html?id=${item.id}">
                        <img src="${item.pic}" alt="">
                        <span>${item.name}</span>
                    </a>
                </li>
                `)
                    }
                })
                render()
            })


        }



// 分页
        render()
        function render() {
            layui.use('laypage', function () {
                let laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem:'pagingTest' //注意，这里的 test1 是 ID，不用加 # 号
                    , count: totals, //数据总数，从服务端得到
                    limit: pageSize,
                    prev: "<",
                    next: ">",
                    groups: 3,
                    hash: 'fenye',
                    curr: location.hash.replace('#!fenye=', ''),
                    layout: ["prev", "page", "next"],
                    theme: '#ffdf1f',
                    jump: function (obj, first) {
                        //首次不执行
                        if (!first) {
                            page = obj.curr;
                            pageSize = obj.limit;
                            fn(category, index);
                        }
                    }
                });
            });


        }







})